<template>
	<view class="capacityClass">
		<uni-nav-bar
			color="#ffffff"
			background-color="#00aded"
			:status-bar="true"
			title="车辆管理"
			fixed="true"
			left-icon="left"
			left-text="返回"
			@clickLeft="back"
			right-icon="personadd-filled"
			@clickRight="addDriver"
		/>
		<view class="capacityTop">
			<dil-search :columnData="options.columnDataList" @onSearch="onSearch" v-if="options.columnDataList.length > 0"></dil-search>
		</view>
		<view class="capacityMain">
			<uni-section :title="title" sub-title="" type="line">
				<dil-card class="dilCard" @emitEvent="emitEvent" v-bind.sync="options"></dil-card>
			</uni-section>
		</view>
		<view class="capacityPop">
			<uni-popup ref="popup" type="dialog">
				<view class="popContent">
					<view class="main">
						<dil-grad-form
							:stepOptions="stepOptions"
							:stepActive="stepActive"
							:formList="formList"
							:formValue="form"
							@next="next"
							@previous="previous"
							@cancelForm="canceAdd"
							@submitGradForm="confirmAdd"
						></dil-grad-form>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import { previewImageList } from '@/utils/utils.js';
export default {
	data() {
		return {
			searchValue: '',
			form: {},
			capacityList: [],
			searchInputVal: '',
			uniList: [],
			fileDisposeMap: [
				{
					name: 'capacityNumber',
					label: '行驶证',
					prop: 'driving_license'
				}
			],
			formList: [
				{
					formId: 692,
					form: {}
				},
				{
					formId: 693,
					form: {}
				}
			],
			stepOptions: [{ title: '主体信息' }, { title: '附加信息' }],
			stepActive: 0,

			imageList: [],
			current: 0,
			mode: 'round',
			options: {
				requestUrl: '/api/v1/rms/getCapacityList?apiId=397',
				requestQuery: {},
				cardSlotList: [
					{
						label: '修改',
						icon: 'wlIcon-shouquan',
						emitEvent: 'updateInfo',
						noPre: '1'
					}
				],
				columnDataList: [],
				totalNum: 0
			},
			needUpdateList: [
				{
					before: 'EMISSION_STANDARD_ID',
					after: 'emissionStandardId'
				},
				{
					before: 'capacityLicenceNumber',
					after: 'CAPACITY_LICENCE_NUMBER'
				},
				{
					before: 'capacityOperateNumber',
					after: 'CAPACITY_OPERATE_NUMBER'
				},
				{
					before: 'capacityAxisNumber',
					after: 'CAPACITY_AXIS_NUMBER'
				},
				{
					before: 'capacityMaxLoad',
					after: 'CAPACITY_MAX_LOAD'
				},
				{
					before: 'capacityMaxWeight',
					after: 'CAPACITY_MAX_WEIGHT'
				},
				{
					before: 'capacityWeightMain',
					after: 'CAPACITY_WEIGHT_MAIN'
				},
				{
					before: 'capacityWeightTrailer',
					after: 'CAPACITY_WEIGHT_TRAILER'
				},
				{
					before: 'carWidth',
					after: 'CAR_WIDTH'
				},
				{
					before: 'carLength',
					after: 'CAR_LENGTH'
				},
				{
					before: 'carHeight',
					after: 'CAR_HEIGHT'
				},
				{
					before: 'carTareWeight',
					after: 'CAR_TARE_WEIGHT'
				},
				{
					before: 'capacityCorlor',
					after: 'CAPACITY_CORLOR'
				},
				{
					before: 'capacityTypeId',
					after: 'CAPACITY_TYPE_ID'
				},
				{
					before: 'emissionStandardId',
					after: 'EMISSION_STANDARD_ID'
				}
			]
		};
	},
	onShow() {
		uni.$emit('onShow', 1);
	},
	watch: {
		'form.capacityNumber'(val) {
			if (val && val.length > 5) {
				this.getCapacityInfoDebounce(val);
			}
		}
	},
	computed: {
		title() {
			return `共${this.options.totalNum}辆车`;
		}
	},
	mounted() {
		this.getCapacityInfoDebounce = this.Tool.debounce((val) => {
			this.getCapacityInfo(val);
		}, 1500);
	},
	methods: {
		getCapacityList() {
			this.options.requestQuery = { ...this.options.requestQuery };
		},
		onSearch(item) {
			this.options.requestQuery = JSON.parse(JSON.stringify(item));
		},
		async getCapacityInfo(val) {
			const res = await this.$myRequest({
				url: '/api/v1/uc/getCapacityInfo',
				data: {
					capacityNumber: val
				}
			});
			if (res.data.status == 'succeed' && res.data.data) {
				console.log(res.data.data, 'res.data');
				this.needUpdateList.forEach((item) => {
					this.$set(this.form, item.before, res.data.data[item.after]);
				});
				if (res.data.data.CAPACITY_LICENCE_URL) {
					previewImageList(res.data.data.CAPACITY_LICENCE_URL).then((r) => {
						this.$set(this.form, 'capacityLicenceUrl', r);
					});
				}
			}
		},
		back() {
			uni.switchTab({
				url: '/pages/myInfo/myInfo'
			});
		},
		//步骤，上一步
		previous(index, form) {
			console.log('previousform: ', form);
			this.form = form;
			this.stepActive = index;
		},
		next(index, form) {
			console.log('nextform: ', form);
			this.form = form;
			this.stepActive = index;
		},
		//取消事件
		cancelForm(form) {
			console.log('cancelFormform: ', form);
			this.form = form;
			this.back();
			uni.showToast({
				title: '用户取消操作',
				icon: 'error',
				duration: 2000
			});
		},
		addDriver() {
			this.$refs.popup.open();
		},
		confirmAdd() {
			this.Tool.uploadFile(this.form, ['capacityLicenceUrl'], (response) => {
				this.addCapacityInfo(response);
			});
		},
		canceAdd() {
			this.form = {};
			this.getCapacityList();
			this.$refs.popup.close();
		},
		async addCapacityInfo(data) {
			let url = '/api/v1/rms/insertCapacity';
			if (data.updateFlag == 'update') {
				url = '/api/v1/rms/updateCapacity';
			}
			const res = await this.$myRequest({
				url: url,
				data: data
			}).catch((err) => {
				uni.showToast({
					duration: 2000,
					title: err,
					icon: 'error'
				});
			});
			if (res.data.status == 'succeed') {
				uni.showToast({
					icon: 'success',
					title: '新增成功',
					duration: 2000
				});
				this.canceAdd();
				this.form = {};
			} else {
				uni.showToast({
					icon: 'none',
					title: res.data.message,
					duration: 2000
				});
			}
		},
		emitEvent(eventName, cardItem) {
			this[eventName](cardItem);
		},
		updateInfo(item) {
			console.log(item, 'item');
			this.form = item;
			this.form.updateFlag = 'update';
			this.$refs.popup.open();
		}
	}
};
</script>

<style lang="scss" scoped>
.capacityClass {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	.capacityTop {
		margin-top: 20rpx;
		background-color: #fff;
	}
	.capacityMain {
		margin-top: 20rpx;
		background-color: #fff;
	}
	.capacityPop {
		.popContent {
			width: 100%;
			height: 100%;
			background-color: #fff;
			.main {
				padding-top: 60rpx;
				margin-left: 15rpx;
				margin-bottom: 20rpx;
			}
			.footer {
				display: flex;
				margin-top: 80rpx;
				margin-bottom: 20rpx;
				u-button {
					// width: 80px
				}
			}
		}
	}
	.popContent {
		width: 100vw;
		height: 100%;
		background-color: #fff;
		.main {
			padding-top: 50rpx;
			// margin-left: 15rpx;
			.downloadFile {
				margin-bottom: 20rpx;
			}
			.swiper-box {
				height: 50vh;
				margin-left: 20rpx;
			}
			.footer {
				display: flex;
				margin-top: 20rpx;
				// margin-bottom: 20rpx;
				u-button {
					// width: 80px
				}
			}
		}
	}
}
</style>
